<!--
 @description 指定区域下所有立面问题列表
 @fileName FacadeAllFile.vue
 @author zengqiongying
 @created 2023/06/15 10:15:44
-->
<template>
  <div>
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="输入关键字"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
        :showAction="false"
      />
    </div>
    <div class="ctm-content-tabs-sticky">
      <qmp-tabs
        ref="qmpTabs"
        v-model:active="activeTab"
        animated
        lazy-render
        class="tab-nav-transparent"
        @change="tabOnChange"
      >
        <qmp-tab v-for="(tab, i) in tabs" :key="i" :title="tab.title" :name="tab.name">
          <FaceFileList
            :ref="(el) => setListRef(el, tab.name)"
            :reportModel="tab.name"
            :amid="amid"
            :search-value="searchValue"
            :readonly="operatorType !== 'edit'"
          />
        </qmp-tab>
      </qmp-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import { IAnyKeyObject } from '@/types/common'
  import FaceFileList from '@/views/components/Facade/FileList.vue'
  import SearchInput from '@/components/SearchInput/index.vue'
  export default {
    name: 'FacadeAllFile',
    components: { SearchInput, FaceFileList },
    setup() {
      const $route = useRoute()
      const datas = reactive({
        operatorType: $route.query?.type || '',
        amid: $route.query?.amid || '',
        activeTab: '0',
        tabs: [
          { title: '全部', name: '0' },
          { title: '未整改', name: '1' },
          { title: '已整改', name: '2' }
        ],
        searchValue: ''
      })

      const listRefs: IAnyKeyObject = {}
      const setListRef = (el: any, name: string) => {
        if (el) {
          listRefs[name] = el
        }
      }
      const tabOnChange = () => {
        nextTick(() => {
          listRefs[`${datas.activeTab}`] && listRefs[`${datas.activeTab}`].resetPageData()
        })
      }
      const onSearch = () => {
        // 搜索
        tabOnChange()
      }
      const onClear = () => {
        // 搜索
        tabOnChange()
      }

      return {
        ...toRefs(datas),
        setListRef,
        tabOnChange,
        onSearch,
        onClear
      }
    }
  }
</script>
<style lang="scss" scoped></style>
